.search-container{
  background: #fff;
  &.list-background{
    background: transparent;
  }
  .search-block{
    @include flex;
    @include a-center;
    padding: 15rpx 32rpx;
    background-color: #F5F5F5;
    position: relative;
    z-index: 4;
    .search-left{
      @include sub-item;
    }
    .search-bar {
      height: 70rpx;
    }
  }
  .platform-block{
    @include flex;
    font-size: 32rpx;
    padding: 14rpx 0 28rpx;
    background-color: #F5F5F5;
    position: relative;
    z-index: 4;
    .platform-item{
      @include sub-item;
      text-align: center;
      position: relative;
      &.active{
        color: #F20219;

        &::after{
          content: '';
          width: 26rpx;
          height: 6rpx;
          border-radius: 3rpx;
          background: #F20219;
          display: inline-block;
          margin-left: -13rpx;
          left: 50%;
          bottom: -8rpx;
          position: absolute;
        }
      }
    }
  }

  .coup-tab {
    @include flex;
    @include j-between;
    @include a-center;
    background-color: #fff;
    padding: 20rpx 30rpx;
    position: relative;
    z-index: 2;
    .coup-tab-l {
      @include flex;
      @include a-center;
      height: 40rpx;
      .icon {
        width:26rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
      .txt {
        font-size:26rpx;
        color:rgba(51,51,51,1);
        line-height:26rpx;
      }
    }
    .tab-switch {
      width: 90rpx;
      height: 42rpx;
      border-radius: 21rpx;
      background-color: #ccc;
      position: relative;
      transition: all 0.3s;
      .tab-switch-icon {
        width: 34rpx;
        height: 34rpx;
        border-radius: 17rpx;
        background-color: #fff;
        top: 50%;
        transform: translateY(-50%);
        right: 52rpx;
        position: absolute;
        transition: right 0.3s;
      }
      &.active {
        background-color: #f20219;
        .tab-switch-icon {
          right: 6rpx
        }
      }
    }
    
  }


  .keyword-block{
    padding: 40rpx 32rpx 0;
    .block-title{
      @include flex;
      @include a-center;
      color: #1C1C1C;
      font-size: 28rpx;

      .sub-item{
        @include sub-item;
        font-size:30rpx;
        color:rgba(102,102,102,1);
        padding: 10rpx 0;
      }

      .icon{
        width: 28rpx;
        height: 28rpx;
      }
    }

    .keyword-item{
      line-height: 48rpx;
      display: inline-block;
      margin: 20rpx 20rpx 0 0;
      padding: 0 28rpx;
      height:48rpx;
      background:rgba(246,247,249,1);
      border-radius:8rpx;
      color: #333;
    }

    &.hot{
      .keyword-item{
        text-align: center;
        &.icon {
          color:rgba(242,2,25,1);
        }
      }
    }
  }

  .goods-list{
    .goods-item-container {
      @include flex;
      @include j-between;
      padding: 30rpx;
      background-color: #fff;
      border-radius:20rpx;
      margin-bottom: 20rpx;
    }
    .goods-pic {
      width:260rpx;
      height:260rpx;
      border-radius: 16rpx;
      overflow: hidden;
      @include flex-item;
    }
    .goods-info {
      @include sub-item;
      padding-left: 20rpx;
      @include flex(column);
      justify-content: space-between;
    }
    .goods-title {
      font-size:26rpx;
      color:#000;
      line-height:40rpx;
      @include text-ellipsis-line;
    }
    .goods-sales {
      font-size:24rpx;
      color:rgba(153,153,153,1);
      line-height:30rpx;
    }
    .goods-coup {
      font-size: 0;
      @include flex;
      @include a-center;
    }
    .coupon{
      color: #fff;
      font-size: 24rpx;
      line-height: 36rpx;
      display: inline-block;
      padding: 0 10rpx 0 20rpx;
      background-size: 100% 100%;
      margin: 0 10rpx 0 12rpx;
      position: relative;
    }
    .goods-coup-price-tip {
      background:rgba(255,255,255,1);
      border: 1rpx solid rgba(242,2,25,1);
      border-radius:5rpx;
      font-size: 20rpx;
      color:rgba(242,2,25,1);
      // line-height: 28rpx;
      padding: 4rpx 10rpx;
      display: block;
    }
    .goods-price {
      font-size: 0;
      @include flex;
    }
    .goods-price-num {
      font-size:28rpx;
      font-weight:bold;
      color:rgba(242,2,25,1);
      line-height: 30rpx;
      &::before {
        content: '￥';
        display: inline-block;
        font-size: 20rpx;
        color:rgba(242,2,25,1);
        font-weight:bold;
      }
    }
    .goods-price-tip {
      font-size:20rpx;
      font-weight:bold;
      color:rgba(242,2,25,1);
      display: inline-block;
      line-height: 32rpx;
      margin-left: 8rpx;
    }

    .goods-type {
      @include flex;
      @include a-center;
    }
    .goods-type-icon {
      width:30rpx;
      height: 30rpx;
      margin-right: 8rpx;
      display: block;
    }
    .goods-type-txt {
      font-size:24rpx;
      color:rgba(153,153,153,1);
      // line-height:30rpx;
    }
   }
}